import React from 'react';

import {Button, Modal, Input, Select, Alert} from 'antd';

import styles from './index.less';

import {emitter} from './myEmitter';
import InputEx from './InputEx';
import SelectEx from './SelectEx';
import FileEx from './FileEx';
import CheckboxEx from './CheckboxEx';
import RadioEx from './RadioEx';
import CascaderEx from './CascaderEx';
import CascaderChooserEx from './CascaderChooserEx';
import GentleidPublishEx from './GentleidPublishEx';
import {EventEmitter} from 'fbemitter';

export default class Operation extends React.Component{

  state = {
    show:false,
    loading:true,
    confirmLoading:false,
    errmessage:""
  }

  originalData = {}
  formdata = {
    id: this.props.record.id
  }
  emitter = new EventEmitter();

  async fetchData(props){
    this.setState({
      loading:true
    });
    if (props.fetchData){
      this.originalData = (await props.fetchData(this.props.record)).data;
    }
    this.setState({
      loading:false,
    })
  }

  async componentWillMount(){
    await this.fetchData(this.props);
    this.emitter.addListener('onValueChange', (name, v)=>{
      this.formdata[name] = v;
    });
    this.emitter.addListener('onValueDelete', (name, v)=>{
      delete(this.formdata[name]);
    })
  }

  async componentWillReceiveProps(n){
    //注意，此处是为了处理antd中Table的一个机制
    //是因为table中operation的部分并非重新生成，而是替换了props，因此需要在此处刷新信息
    //理论上应该在Operation中处理，但是没想到处理方案
    //如果不加上!==判断，会去尝试setState没有mount的组件，即此时表格没有填满
    //可能还有其它bug

    if (n.record.id !== this.props.record.id){
      await this.fetchData(n);
    }
  }

  genInner(){
    if (this.props.dataIndex){
      return this.props.dataIndex.map(v=>{
        if (this.originalData[v.name] === undefined){
          return;
        }

        if (v.render){
          return v.render(this.props.record, this.originalData);
        }else{
          var defaultParams = {
            defaultValue:this.originalData[v.name],
            name:v.name,
            disabled:v.disabled?true:false,
            record:this.props.record,
            emitter:this.emitter
          }

          if (v.type === 'textarea'){
            return <span key = {this.props.record.id + "_" +v.name}>
              <div>{v.subtitle}</div>
              <InputEx type = 'textarea' {...defaultParams}/>
            </span>
          }else if (v.type === 'select'){
            return <span key = {this.props.record.id + "_" +v.name}>
              <div>{v.subtitle}</div>
              <SelectEx {...defaultParams}>
                {
                  v.options.map(o=><Select.Option value = {o.value} key = {this.props.record.id+"_"+v.name+"_"+o.value}>
                    {o.text}
                  </Select.Option>)
                }
              </SelectEx>
            </span>
          }else if (v.type === 'cascader'){
            return <span key = {this.props.record.id + "_" + v.name}>
              <div>{v.subtitle}</div>
              <CascaderEx options = {v.options} {...defaultParams}/>
            </span>
          }else if (v.type === 'img'){
            return <span key = {this.props.record.id + "_" +v.name}>
              <div>{v.subtitle}</div>
              <FileEx {...defaultParams}/>
            </span>
          }else if (v.type === 'gentleid_publish'){
            return <span key = {this.props.record.id + "_" +v.name}>
              <div>{v.subtitle}</div>
              <GentleidPublishEx {...defaultParams} imgonly = {v.imgonly} textonly = {v.textonly}/>
            </span>
          }else if (v.type === 'checkbox'){
            return <span key = {this.props.record.id + "_" +v.name}>
              <div>{v.subtitle}</div>
              <CheckboxEx {...defaultParams} options = {v.options}/>
            </span>
          }else if (v.type === 'radio'){
            return <span key = {this.props.record.id + "_" +v.name}>
              <div>{v.subtitle}</div>
              <RadioEx {...defaultParams} options = {v.options}/>
            </span>
          }else if (v.type === 'cascaderchooser'){
            return <span key = {this.props.record.id + "_" +v.name}>
              <div>{v.subtitle}</div>
              <CascaderChooserEx {...defaultParams} fetchCascaderOption = {v.fetchCascaderOption}/>
            </span>
          }else {
            return <span key = {this.props.record.id + "_" +v.name}>
              <div>{v.subtitle}</div>
              <InputEx {...defaultParams}/>
            </span>
          }
        }

      })
    }else{
      return <div/>
    }
  }

  async onOk(){
    if (this.props.onOk){
      this.setState({confirmLoading:true});
      var ret = await this.props.onOk(this.props.record, this.formdata);

      if (ret.ok){
        this.setState({
          show:false,
          errmessage:""
        });
        await this.fetchData(this.props);
      }else{
        this.setState({
          confirmLoading:false,
          errmessage:ret.errmessage
        })
      }
    }
  }

  onCancel(){
    this.setState({
      show:false,
      errmessage:""
    });
    if (this.props.onCancel){
      this.props.onCancel()
    }
    this.emitter.emit('onReset');
  }

  render(){
    if (this.state.loading){
      return <div/>
    }
    return <div>
      <Button type = "primary" onClick = {async ()=>{
        this.setState({show:true, confirmLoading:false});
        this.emitter.emit('onReset');
      }}>
        {this.props.text}
      </Button> 
      <Modal 
        width = {this.props.width?this.props.width:520}
        visible = {this.state.show} 
        maskClosable = {false} 
        onCancel = {()=>{this.onCancel()}}
        confirmLoading = {this.state.confirmLoading}
        onOk = {()=>this.onOk()}
      >

        {this.genInner()}
        {this.state.errmessage?<Alert message = {this.state.errmessage} type = "error"/>:<div/>}

      </Modal>
    </div>
  }

}

